<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script type="application/javascript" src="js/jquery-1.11.3.js"></script>
		<script type="text/javascript" src="layui/layui.js"></script>
		<link rel="stylesheet" href="layui/css/layui.css" media="all">
		<style>
			#header_box {
				margin: 0px auto;
			}
			#imgLog {
				margin: 50px 200px 0px;
			}
			#login_box {
				margin-left: 200px;
				background-image: url(img/login/banner.jpg);
				width: 1020px;
				height: 300px;
			}
			#innerLogin {
				margin-top: 10px;
				margin-left: 600px;
				background-color: #ffffff;
				width: 430px;
				height: 300px;
			}
			#errorMsg {
				margin-top: 5px;
				border: 1px solid #f2dede;
				height: 10px;
				background-color: #f2dede;
			}
			#footer_box {
				width: 1000px;
				margin: 300px 80px 50px;
			}
		</style>
		<title>YiLong登录</title>
	</head>
	<body style="background-color: #e8eff6;">
		<div id="header_box">
			<a href="index.html"><img id="imgLog" src="img/header/joinlog.png" /></a>
		</div>
		<div id="login_box">
			<!-- 表单 -->
			<div id="innerLogin">
				<img src="img/login/login0.png" style="margin: 5px 210px 0px; width: 30px; height: 30px;" />
				<div id="errorMsg"></div>
				<form class="layui-form" style="margin-top: 20px;">
					<div class="layui-form-item">
						<label class="layui-form-label">账号</label>
						<div class="layui-input-inline">
							<input type="text" name="title" required lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">密码</label>
						<div class="layui-input-inline">
							<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off"
							 class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">验证码</label>
						<div class="layui-input-inline">
							<input type="text" name="ver" required lay-verify="required" placeholder="请输入验证码" autocomplete="off"
							 class="layui-input">
						</div>
						<div class="layui-form-mid layui-word-aux">
							<img src="verification" onclick="changeVerificationCode(this)" />
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<button class="layui-btn" lay-submit lay-filter="loginBtn">登录</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</div>
				</form>
			</div>
			<div style="text-align:right"> <a href="#">立即注册</a> </div>
			<div id="footer_box">
				<a href="#">代理合作 &nbsp;|&nbsp;</a>
				<a href="#">联系我们 &nbsp;|&nbsp;</a>
				<a href="#">广告服务 &nbsp;|&nbsp;</a>
				<span> © 2000 - 2017 北京艺龙信息技术有限公司, eLong, Inc or its affiliates. All Rights Reserved</span>
			</div>
		</div>

		<!-- 表单js代码 -->
		<script>
			//Demo
			layui.use('form', function() {
				var form = layui.form;

				//登录按钮 监听提交
				form.on('submit(loginBtn)', function(data) {
					layer.msg(JSON.stringify(data.field));
					return false;
				});
			});
			
			//验证码点击事件
			function changeVerificationCode(img) {
				img.src="verification?"+new Date().getTime();
			}
		</script>
	</body>
</html>
